<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../js/wu_qi/bootstrap/css/bootstrap.min.css">
  <script src="../../js/wu_qi/bootstrap/js/jq.mini.js"></script>
  <script src="../../js/wu_qi/bootstrap/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../css/wu_qi/reset.css">
  <script src="../../js/wu_qi/Flow.js"></script>
  </link>
  <style>
    .header {
      padding: 20px 50px;
      height: 100%;
      font-size: 16px;
    }

    .header .header_title {
      font-size: 20px;
      height: 30px;
      line-height: 30px;
    }

    .header_list {
      border-top: 1px solid #1561;
      display: flex;
      padding-top: 10px;


    }

    .list {
      text-align: center;
      height: 112px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #1561;
      flex: 1;
      margin-right: 50px;
      width: 225px;
    }

    .list_right {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

    }

    .list_right p {
      font-size: 12px;
    }

    .list_right h2 {
      font-size: 28px;
    }

    .header_bot {
      padding: 15px 0px;
    }

    .center .header_input {
      width: 280px;
      height: 30px;
      padding: 0px 10px;
      margin: 0px 10px;
      background-color: rgba(255, 255, 255, 1);
      border: 1px solid rgba(217, 217, 217, 1);
      border-radius: 4px;
      box-sizing: border-box;
      color: rgb(78, 78, 78);
    }

    .header_input_title {
      padding: 0px 5px;
      text-align: center;
      line-height: 30px;
    }



    .center_list_ul {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      color: #666666;
    }

    .header .center_list_ul li {
      flex: 1;
      width: 125px;
      height: 50px;
      text-align: center;
      line-height: 35px;
      border: 1px solid rgba(217, 217, 217, 1);
      background-color: rgba(244, 244, 244, 1);
    }

    .headerPage ul {
      display: flex;
    }

    .headerPage ul li {
      flex: 1;
      width: 125px;
      height: 50px;
      text-align: center;
      line-height: 35px;
    }

    .list_suJu {
      font-size: 14px;
      display: flex;
      justify-content: flex-end;
    }

    .list_suJu_nub {
      font-size: 18px;
    }



    .header_img {
      width: 60px;
      height: 60px;
      background-color: rgba(25, 158, 216, 1);
      border-radius: 50%;
      margin-right: 20px;
    }

    .header img {
      margin: 0px auto;
      margin-top: 15px;
    }

    .page {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: rgb(255, 255, 255);
      margin: 3px 5px;
      cursor: pointer;
      border-radius: 10%;
    }

    .active {
      background-color: rgba(25, 158, 216, 1);
      color: aliceblue;
    }

    .fooler {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>

  <div class="container-fluid header">
    <div class="header_title">
      资金流水
    </div>
    <div class="row header_list  w-100">

      <div class="col list">
        <div class="header_img">
          <img src="../../img/wu_qi/caiwu.png" alt="">
        </div>
        <div class="list_right">
          <p>今日收入</p>
          <h2 class="">124,345</h2>
        </div>
      </div>
      <div class="col list">
        <div class="header_img">
          <img src="../../img/wu_qi/caiwu.png" alt="">
        </div>
        <div class="list_right">
          <p>今日支出</p>
          <h2>124,345</h2>
        </div>
      </div>
      <div class="col list">
        <div class="header_img">
          <img src="../../img/wu_qi/caiwu.png" alt="">
        </div>
        <div class="list_right">
          <p>上月收入</p>
          <h2>124,345</h2>
        </div>
      </div>
      <div class="col list">
        <div class="header_img">
          <img src="../../img/wu_qi/caiwu.png" alt="">
        </div>
        <div class="list_right">
          <p>本月支出</p>
          <h2>124,345</h2>
        </div>
      </div>
    </div>
    <div class="row w-50 header_bot">
      <div class="col list">
        <div class="header_img">
          <img src="../../img/wu_qi/caiwu.png" alt="">
        </div>
        <div class="list_right">
          <p>本月收入</p>
          <h2>124,345</h2>
        </div>
      </div>
      <div class="col list">
        <div class="header_img">
          <img src="../../img/wu_qi/caiwu.png" alt="">
        </div>
        <div class="list_right">
          <p>本月支出</p>
          <h2>124,345</h2>
        </div>
      </div>
    </div>
    <!-- 输入框 -->
    <div class="center">
      <div class="row">
        <div class="col-lg-4">
          <div class="input-group input-group-sm mb-3">
            <div class="header_input_title ">手机号码</div>

            <div>
              <input type="text" class="form-control header_input phone" placeholder="请输入手机号码">
            </div>
          </div>
          <div class="input-group input-group-sm mb-3">
            <div class="header_input_title">会员等级</div>
            <!-- Single button -->
            <div>
              <div class="form-group">
                <select id="grade" class="form-control header_input level">
                  <option value="0">选择会员等级</option>
                  <option value="A">A</option>
                  <option value="B">B</option>
                  <option value="C">C</option>
                  <option value="D">D</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="input-group input-group-sm mb-3">
            <div class="header_input_title">资金类型</div>
            <!-- Single button -->
            <div>
              <div class="form-group">
                <select id="grade" class="form-control header_input FundingType">
                  <option value="0">选择资金类型</option>
                  <option value="等级充值">等级充值</option>
                  <option value="购物消费">购物消费</option>
                </select>
              </div>
            </div>
          </div>
          <div class="input-group input-group-sm mb-3">
            <div class="header_input_title">收入/支出</div>
            <!-- Single button -->
            <div>
              <div class="form-group">
                <select id="grade" class="form-control header_input incomeExpenditure">
                  <option value="0">选择收支类型</option>
                  <option value="收入">收入</option>
                  <option value="支出">支出</option>

                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="input-group input-group-sm mb-3">
            <div class="header_input_title">支付方式</div>
            <!-- Single button -->
            <div>
              <div class="form-group">
                <select id="grade" class="form-control header_input Method">
                  <option value="0">选择支付方式</option>
                  <option value="微信">微信</option>
                  <option value="支付宝">支付宝</option>
                </select>
              </div>
            </div>

          </div>
          <div class="btn-group header_btn" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-primary search">搜索</button>
          </div>
          <div class="btn-group header_btn" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-primary reset">重置</button>
          </div>
        </div>
      </div>
    </div>
    <div class="list_suJu">共
      <div class="list_suJu_nub"></div>
      条数据
    </div>
    <div class="center_list">
      <ul class="list-group center_list_ul">
        <li class="list-group-item">流水编号</li>
        <li class="list-group-item">用户码</li>
        <li class="list-group-item">手机号码</li>
        <li class="list-group-item">会员等级</li>
        <li class="list-group-item">资金类型</li>
        <li class="list-group-item">支付方式</li>
        <li class="list-group-item">金额</li>
        <li class="list-group-item">收支类型</li>
        <li class="list-group-item">时间</li>
      </ul>
      <div class="headerPage ">
      </div>
      <div class="fooler">
        <nav aria-label="Page navigation example">
          <ul class="pagination">
            <div class="clear pageDiv">
              <span class="page active">1</span>
              <span class="page">1</span>
            </div>
          </ul>
        </nav>
      </div>
    </div>

  </div>
  <script>
    //全局声明
    let searchArr = []
    let toPage = []
    let maxPage
    let to = 1
    search()

    $(".list_suJu_nub").text(flow.length)
    //渲染数据
    function show(data) {
      $(".headerPage").html("")
      for (let i = 0; i < data.length; i++) {
        $(".headerPage").append(`
                 <ul>
                            <li class="list-group-item">${data[i].number}</li>
                            <li class="list-group-item">${data[i].user}</li>
                            <li class="list-group-item">${data[i].cellPhone}</li>
                            <li class="list-group-item">${data[i].level}</li>
                            <li class="list-group-item">${data[i].FundingType}</li>
                            <li class="list-group-item">${data[i].Method}</li>
                            <li class="list-group-item">${data[i].Amount}</li>
                            <li class="list-group-item">${data[i].incomeExpenditure}</li>
                             <li class="list-group-item">${data[i].Time}</li>
                    </ul>
                `)

      }
    }
    // 分页 每页7页
    function showData(data, pageNum) {
      let toS = (pageNum - 1) * 7
      toPage = data.slice(toS, toS + 7)
      show(toPage)
      $(".page").eq(pageNum - 1).addClass("active").siblings().removeClass("active")
      to = pageNum
    }

    function showPage(data) {
      maxPage = Math.ceil(data.length / 7)
      $(".pageDiv").html("")
      for (let i = 1; i <= maxPage; i++) {
        $('.pageDiv').append(`<span class="page">${i}</span>`)
      }
    }
    $('.pageDiv').on('click', '.page', function () {
      showData(searchArr, parseInt($(this).text()))
    })
    //搜索
    $(".search").click(function () {
      search()
    })

    function search() {
      let phone = $(".phone").val()
      let level = $(".level option:selected").val()
      let FundingType = $(".FundingType option:selected").val()
      let Method = $(".Method option:selected").val()
      let incomeExpenditure = $(".incomeExpenditure option:selected").val()
      console.log(level, FundingType, Method, incomeExpenditure);
      searchArr = [...flow]
      console.log(searchArr);

      if (phone != "") {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchArr[i].number != phone) {
            searchArr.splice(i, 1)
            i--
          }

        }
      }

      if (level != 0) {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchArr[i].level != level) {
            searchArr.splice(i, 1)
            i--
          }
        }
      }
      if (FundingType != 0) {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchArr[i].FundingType != FundingType) {
            searchArr.splice(i, 1)
            i--
          }

        }
      }
      if (Method != 0) {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchArr[i].Method != Method) {
            searchArr.splice(i, 1)
            i--
          }

        }
      }
      if (incomeExpenditure != 0) {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchArr[i].number != incomeExpenditure) {
            searchArr.splice(i, 1)
            i--
          }

        }
      }
      console.log(searchArr);
      showPage(searchArr)
      showData(searchArr, 1)
    }
    //重置
    $(".reset").click(function () {
      $(".phone").val("")
      $(".level option:first-child").prop('selected', 'selected')
      $(".FundingType option:first-child").prop('selected', 'selected')
      $(".Method option:first-child").prop('selected', 'selected')
      $(".incomeExpenditure option:first-child").prop('selected', 'selected')
      search()
    })
  </script>
</body>

</html>